<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
<div class = "box"></div>

 <script>
/*
函数：function

在js中，函数是一等公民

js的定义:一个能执行的有自己的功能方法的集合体

函数的定义：即函数声明，函数定义了并不会直接执行
    function 函数名(){}
    函数名：类似于变量名
    {}中填写你要执行的代码语句

函数的使用:即函数执行，函数调用
    函数名()

函数的输入和输出，

    函数的参数的传入：
    意义：让代码执行的时候更加定制化
    在括号中传入参数，可以传入若干个参数，多个参数以逗号分隔

    参数存在哪些地方？

    存在于函数声明的位置：
        接收参数的，叫形参
        函数的形参不需要变量声明，默认已经声明了

    存在于函数执行的位置：
        传入参数的，叫实参

    参数对不齐怎么办？
        实参比形参多，多的部分忽略，因为没接收

        实参比形参少，形参就接收不到值，就直接是undefined


*/

let width = 100

let box = document.querySelector(".box")

function setBackgroundColor(r,g,b,a){
    
    box.style.backgroundColor = `rgb(${r},${g},${b},${a})`
}


 </script>   
</body>
</html>